<template>
	<uni-popup ref="popup_select_device" type="bottom" border-radius="16px 16px 0 0" @change="onPopupChange">
		<view class="pop-box" v-if="deviceDetail">
			<view class="pop-header pad-20">
				<view class="flex flex-between flex-center">
					<view class="col-000-8 font-18 font-600">
						<!-- 灯光控制 -->
						{{ $t('controlLight.title') }}
					</view>
					<!-- <view class="text-center ">
						<view class="font-11 col-000-4 top-status">
							<span class="dot" :class="{'no': deviceDetail && deviceDetail.device_status == 0}"></span>
							{{deviceDetail.device_name}}
						</view>
					</view> -->
					<view class="close" @click="closePopup">
						<uni-icons type="closeempty" color="rgba(0,0,0,0.4)" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<scroll-view class="pop-content" scroll-y>
				<view class="form-box pad-20">
				<view class="item">
					<view class="title font-14 font-500 col-000-8">
						<!-- 灯光 -->
						{{ $t('controlLight.light') }}


					</view>
					<view class="">
						<switch :checked="checkedLight" style="transform:scale(0.9)" color="rgba(0,0,0,0.8)"
							@change="switch1Change" />
					</view>
				</view>
				<view class="item m-t-20">
					<view class="title font-14 font-500 col-000-8">
						<!-- 灯光模式 -->
						{{ $t('controlLight.lightMode') }}
					</view>
				</view>
				<view class="light-type" :class="{ 'disabled': !checkedLight }">
					<view class="type" @click="checkedLight && changeLightType('constant')" :class="{on : lightType == 'constant' }">
						<view class="ico">
							<image class="w-100" src="/static/images/light.png" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="font-14 col-000-8">
								<!-- 常亮模式 -->
								{{ $t('controlLight.lightOn') }}


							</view>
							<view class="font-11 col-000-4 m-t-4">
								<!-- 保持固定颜色 -->
								{{ $t('controlLight.lightOnFixedColor') }}

							</view>
						</view>
					</view>
					<view class="type" @click="checkedLight && changeLightType('breathing')" :class="{on : lightType == 'breathing' }">
						<view class="ico">
							<image class="w-100" src="/static/images/hx.png" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="font-14 col-000-8">
								<!-- 呼吸模式 -->
								{{ $t('controlLight.lightBreathing') }}
							</view>
							<view class="font-11 col-000-4 m-t-4">
								<!-- 亮度渐变 -->
								{{ $t('controlLight.lightBreathingBrightnessGradient') }}
							</view>
						</view>
					</view>
					<view class="type" @click="checkedLight && changeLightType('rainbow')" :class="{on : lightType == 'rainbow' }">
						<view class="ico">
							<image class="w-100" src="/static/images/ch.png" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="font-14 col-000-8">
								<!-- 彩虹模式 -->
								{{ $t('controlLight.lightRainbow') }}
							</view>
							<view class="font-11 col-000-4 m-t-4">
								<!-- 颜色循环变化 -->
								{{ $t('controlLight.lightRainbowColorCycle') }}
							</view>
						</view>
					</view>
					<view class="type" @click="checkedLight && changeLightType('tracking')" :class="{on : lightType == 'tracking' }">
						<view class="ico">
							<image class="w-100" src="/static/images/gj.png" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="font-14 col-000-8">
								<!-- 轨迹跟踪 -->
								{{ $t('controlLight.lightTrajectoryTracking') }}
							</view>
							<view class="font-11 col-000-4 m-t-4">
								<!-- 随着轨迹变化灯光 -->
								{{ $t('controlLight.lightTrajectoryTrackingLightChange') }}
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title font-14 font-500 col-000-8" :class="{ 'disabled-text': !checkedLight }">
						<!-- 颜色 -->
						{{ $t('controlLight.color') }}
					</view>
				</view>
				<view class="color-box" :class="{ 'disabled': !checkedLight }">
					<!-- 渐变色选择器 -->
					<view class="gradient-picker m-t-20" @click="onGradientClick">
						<view class="gradient-background">
							<!-- 渐变色背景 -->
							<view class="gradient-overlay"></view>
							<!-- 选择指示器 -->
							<view class="color-indicator" :style="{ left: indicatorPosition.x + 'px', top: indicatorPosition.y + 'px' }">
								<view class="indicator-circle"></view>
							</view>
						</view>
					</view>
					
					<!-- 预设颜色列表 -->
					<view class="color-list m-t-20">
						<view class="item" :style="{backgroundColor : item}" @click="checkedLight && changeColor(index)" :class="{on : colorIndex == index}" v-for="(item,index) in colorList" :key="index">
							<uni-icons class="ico" type="checkmarkempty" size="20" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
				
				<view class="item m-t-20">
					<view class="title font-14 font-500 col-000-8" :class="{ 'disabled-text': !checkedLight }">
						<!-- 亮度 -->
						{{ $t('controlLight.brightness') }}
					</view>
					<view class="font-14 col-000-8" :class="{ 'disabled-text': !checkedLight }">
						{{light.current_value}}%
					</view>
				</view>
				<view class="light-change" :class="{ 'disabled': !checkedLight }">
					<slider style="margin: 10px 0;" class="audio-slider" activeColor="rgba(0,0,0,0.08)" block-size="20" backgroundColor="rgba(0,0,0,0.08)"
						block-color="#000" :value="light.current_value" :max="light.duration_value" @change="handleChangeLight" :disabled="!checkedLight"></slider>
				</view>
				<view class="flex flex-between flex-center m-t-4">
					<view class="font-11 col-000-4">
						0%
					</view>
					<view class="font-11 col-000-4">
						{{light.duration_value}}%
					</view>
				</view>
				
				<view class="item m-t-20">
					<view class="title font-14 font-500 col-000-8" :class="{ 'disabled-text': !checkedLight }">
						<!-- 变化速度 -->
						{{ $t('controlLight.changeSpeed') }}
					</view>
					<view class="font-14 col-000-8" :class="{ 'disabled-text': !checkedLight }">
						{{speed.current_value}}%
					</view>
				</view>
				<view class="light-change" :class="{ 'disabled': !checkedLight }">
					<slider style="margin: 10px 0;" class="audio-slider" activeColor="rgba(0,0,0,0.08)" block-size="20" backgroundColor="rgba(0,0,0,0.08)"
						block-color="#000" :value="speed.current_value" :max="speed.duration_value" @change="handleChangeSpeed" :disabled="!checkedLight"></slider>
				</view>
				<view class="flex flex-between flex-center m-t-4">
					<view class="font-11 col-000-4">
						0%
					</view>
					<view class="font-11 col-000-4">
						{{speed.duration_value}}%
					</view>
				</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
	import deviceStore from '@/store/deviceStore.js';
	import mqttApi from '@/api/my-mqtt.js';

	export default {
		data() {
			return {
				deviceSn: '', // 改为使用设备序列号
				deviceName: '',
				showColor: true,
				deviceStatus: null,
				checkedLight: true,
				lightType: 'constant',
				color: '#EF4444	',
				colorIndex: -1, // 默认不选中任何颜色
				light: {
					current_value: 20,
					duration_value: 100
				},
				speed: {
					current_value: 20,
					duration_value: 200
				},
				deviceDetail: null,
				colorList: ['#EF4444','#EBB305','#22C55D','#3C82F6','#A855F7','#EC4899'],
				// 渐变色选择器相关
				indicatorPosition: {
					x: 150, // 默认中间位置
					y: 100
				},
				selectedColor: '#22C55D' // 当前选中的颜色
			}
		},
		components: {
			tColorPicker
		},
		methods: {
			//从deviceStore获取设备详情和灯光配置
			getDeviceFromStore(deviceSn) {
				const deviceStatus = deviceStore.getDeviceStatus(deviceSn);
				console.log('[LightControl] 从deviceStore获取设备状态:', deviceStatus);
				
				if (deviceStatus) {
					this.deviceDetail = {
						device_name: `设备 ${deviceSn.slice(-8)}`, // 使用SN后8位作为显示名称
						device_status: deviceStatus.online ? 1 : 0,
						sn: deviceSn
					};
					
					// 获取设备的灯光设置
					const lightSettings = deviceStore.getLightSettings(deviceSn);
					if (lightSettings) {
						console.log('[LightControl] 使用设备状态中的灯光配置:', lightSettings);
						
						this.checkedLight = lightSettings.enabled !== false;
						this.lightType = lightSettings.mode || 'constant';
						this.light.current_value = lightSettings.brightness || 20;
						this.speed.current_value = lightSettings.speed || 20;
						
						// 处理颜色匹配，只匹配完全相同的颜色
						if (lightSettings.color) {
							const deviceColor = lightSettings.color.toUpperCase();
							const colorIndex = this.colorList.findIndex(color => color.toUpperCase() === deviceColor);
							
							if (colorIndex !== -1) {
								this.colorIndex = colorIndex;
								console.log(`[LightControl] 颜色匹配成功: ${deviceColor} -> index ${colorIndex}`);
							} else {
								// 没有匹配的颜色，不选中任何颜色
								this.colorIndex = -1;
								console.log(`[LightControl] 颜色未匹配，不选中任何颜色: ${lightSettings.color}`);
							}
						} else {
							// 没有颜色信息，不选中任何颜色
							this.colorIndex = -1;
						}
					} else {
						// 使用默认值
						console.log('[LightControl] 使用默认灯光配置');
						this.checkedLight = false;
						this.lightType = 'constant';
						this.light.current_value = 20;
						this.speed.current_value = 20;
						this.colorIndex = -1; // 不选中任何颜色
					}
					
					console.log('[LightControl] 最终UI状态:', {
						checkedLight: this.checkedLight,
						lightType: this.lightType,
						brightness: this.light.current_value,
						speed: this.speed.current_value,
						colorIndex: this.colorIndex
					});
				} else {
					console.warn('[LightControl] 在deviceStore中未找到设备:', deviceSn);
					this.deviceDetail = {
						device_name: `设备 ${deviceSn.slice(-8)}`,
						device_status: 0,
						sn: deviceSn
					};
					// 使用默认值
					this.checkedLight = false;
					this.lightType = 'constant';
					this.light.current_value = 20;
					this.speed.current_value = 20;
					this.colorIndex = -1; // 不选中任何颜色
				}
			},
			
			// 发送MQTT灯光控制指令
			async sendLightControlCommand(lightConfig) {
				try {
					console.log('[LightControl] 发送MQTT灯光控制指令:', lightConfig);
					const result = await mqttApi.sendLightControl(this.deviceSn, lightConfig);
					
					if (result) {
						uni.showToast({
							title: '设置成功',
							icon: 'success'
						});
						
						// 更新本地状态到deviceStore
						const currentStatus = deviceStore.getDeviceStatus(this.deviceSn) || {};
						deviceStore.updateDeviceStatus(this.deviceSn, {
							...currentStatus,
							lightSettings: lightConfig
						});
					} else {
						uni.showToast({
							title: '设置失败，请重试',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('[LightControl] 发送灯光控制指令失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			
			async handleChangeLight(e) {
				this.light.current_value = e.detail.value;
				
				// 只有在灯光开启时才发送指令
				if (!this.checkedLight) {
					return;
				}
				
				try {
					await mqttApi.setLightBrightness(this.deviceSn, this.light.current_value);
					
					// 更新本地状态
					this.updateLocalLightSettings({ brightness: this.light.current_value });
					
					console.log(`[LightControl] 亮度设置成功: ${this.light.current_value}%`);
				} catch (error) {
					console.error('[LightControl] 亮度设置失败:', error);
					uni.showToast({
						title: '亮度设置失败',
						icon: 'error'
					});
				}
			},
			
			async handleChangeSpeed(e) {
				this.speed.current_value = e.detail.value;
				
				// 只有在灯光开启时才发送指令
				if (!this.checkedLight) {
					return;
				}
				
				try {
					await mqttApi.setLightSpeed(this.deviceSn, this.speed.current_value);
					
					// 更新本地状态
					this.updateLocalLightSettings({ speed: this.speed.current_value });
					
					console.log(`[LightControl] 速度设置成功: ${this.speed.current_value}%`);
				} catch (error) {
					console.error('[LightControl] 速度设置失败:', error);
					uni.showToast({
						title: '速度设置失败',
						icon: 'error'
					});
				}
			},
			
			async changeColor(index) {
				this.colorIndex = index;
				
				// 只有在灯光开启时才发送指令
				if (!this.checkedLight) {
					return;
				}
				
				try {
					const colorValue = this.colorList[index];
					this.selectedColor = colorValue;
					
					// 更新指示器位置到对应的预设颜色位置
					this.updateIndicatorForPresetColor(index);
					
					await mqttApi.setLightColor(this.deviceSn, colorValue);
					
					// 更新本地状态
					this.updateLocalLightSettings({ color: colorValue });
					
					console.log(`[LightControl] 颜色设置成功: ${colorValue}`);
				} catch (error) {
					console.error('[LightControl] 颜色设置失败:', error);
					uni.showToast({
						title: '颜色设置失败',
						icon: 'error'
					});
				}
			},
			
			// 处理渐变色选择器点击事件
			onGradientClick(e) {
				if (!this.checkedLight) {
					return;
				}
				
				// 获取点击位置
				const touch = e.touches[0] || e.changedTouches[0];
				
				// 创建查询对象
				const query = uni.createSelectorQuery().in(this);
				query.select('.gradient-background').boundingClientRect(rect => {
					if (rect) {
						// 计算相对位置
						const x = touch.clientX - rect.left;
						const y = touch.clientY - rect.top;
						
						// 限制在边界内
						const clampedX = Math.max(0, Math.min(x, rect.width));
						const clampedY = Math.max(0, Math.min(y, rect.height));
						
						// 更新指示器位置
						this.indicatorPosition = {
							x: clampedX,
							y: clampedY
						};
						
						// 计算颜色
						const color = this.calculateColorFromPosition(clampedX, clampedY, rect.width, rect.height);
						this.selectedColor = color;
						
						// 取消预设颜色选中
						this.colorIndex = -1;
						
						// 发送颜色到设备
						this.setCustomColor(color);
					}
				}).exec();
			},
			
			// 根据位置计算颜色
			calculateColorFromPosition(x, y, width, height) {
				// 计算色相 (0-360度)
				const hue = (x / width) * 360;
				
				// 计算饱和度和亮度
				const saturation = 100;
				const lightness = 100 - (y / height) * 50; // 从上到下：100% -> 50%
				
				// 将HSL转换为RGB
				return this.hslToHex(hue, saturation, lightness);
			},
			
			// HSL转HEX
			hslToHex(h, s, l) {
				s /= 100;
				l /= 100;
				
				const c = (1 - Math.abs(2 * l - 1)) * s;
				const x = c * (1 - Math.abs((h / 60) % 2 - 1));
				const m = l - c / 2;
				let r = 0, g = 0, b = 0;
				
				if (0 <= h && h < 60) {
					r = c; g = x; b = 0;
				} else if (60 <= h && h < 120) {
					r = x; g = c; b = 0;
				} else if (120 <= h && h < 180) {
					r = 0; g = c; b = x;
				} else if (180 <= h && h < 240) {
					r = 0; g = x; b = c;
				} else if (240 <= h && h < 300) {
					r = x; g = 0; b = c;
				} else if (300 <= h && h < 360) {
					r = c; g = 0; b = x;
				}
				
				r = Math.round((r + m) * 255);
				g = Math.round((g + m) * 255);
				b = Math.round((b + m) * 255);
				
				return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
			},
			
			// 设置自定义颜色
			async setCustomColor(color) {
				try {
					await mqttApi.setLightColor(this.deviceSn, color);
					this.updateLocalLightSettings({ color });
					console.log(`[LightControl] 自定义颜色设置成功: ${color}`);
				} catch (error) {
					console.error('[LightControl] 自定义颜色设置失败:', error);
					uni.showToast({
						title: '颜色设置失败',
						icon: 'error'
					});
				}
			},
			
			// 更新指示器到预设颜色位置
			updateIndicatorForPresetColor(index) {
				// 根据预设颜色计算对应的渐变位置
				const colorMap = {
					0: { x: 30, y: 60 },   // 红色
					1: { x: 80, y: 60 },   // 黄色
					2: { x: 150, y: 60 },  // 绿色
					3: { x: 220, y: 60 },  // 蓝色
					4: { x: 270, y: 60 },  // 紫色
					5: { x: 310, y: 90 }   // 粉色
				};
				
				if (colorMap[index]) {
					this.indicatorPosition = colorMap[index];
				}
			},
			
			open(deviceSn) {
				this.deviceSn = deviceSn;
				console.log('[LightControl] 打开灯光控制面板，设备SN:', deviceSn);
				this.getDeviceFromStore(deviceSn);
				this.$refs.popup_select_device.open('bottom');
			},
			
			closePopup() {
				this.deviceSn = '';
				this.deviceName = '';
				this.deviceStatus = '';
				this.$refs.popup_select_device.close();
			},
			
		// 处理弹窗状态变化
		onPopupChange(e) {
			const isOpen = e.show;
			console.log('[LightControl] 弹窗状态变化:', isOpen ? '打开' : '关闭');
			
			// 通知父组件弹窗状态变化
			if (!isOpen) {
				this.$emit('close');
			}
			
			// iOS 端处理背景滚动
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			if (currentPage) {
				if (isOpen) {
					// 弹窗打开时，禁止背景页面滚动
					currentPage.$el.style.overflow = 'hidden';
				} else {
					// 弹窗关闭时，恢复背景页面滚动
					currentPage.$el.style.overflow = '';
				}
			}
			// #endif
		},			// 修改灯光类型（使用独立的MQTT方法）
			async changeLightType(lightType) {
				this.lightType = lightType;
				
				// 只有在灯光开启时才发送指令
				if (!this.checkedLight) {
					return;
				}
				
				try {
					await mqttApi.setLightEffect(this.deviceSn, lightType);
					
					// 更新本地状态
					this.updateLocalLightSettings({ mode: lightType });
					
					uni.showToast({
						title: '模式设置成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('[LightControl] 模式设置失败:', error);
					uni.showToast({
						title: '模式设置失败',
						icon: 'error'
					});
				}
			},
			// 灯光开关切换处理（使用独立的MQTT方法）
			async switch1Change(e) {
				console.log('[LightControl] 灯光开关切换:', e);
				const value = e.detail.value;
				this.checkedLight = value;
				
				try {
					if (value) {
						// 开启LED
						await mqttApi.turnOnLight(this.deviceSn);
						
						// 逐步设置其他参数
						if (this.lightType) {
							await mqttApi.setLightEffect(this.deviceSn, this.lightType);
						}
						
						if (this.colorList && this.colorIndex >= 0 && this.colorList[this.colorIndex]) {
							await mqttApi.setLightColor(this.deviceSn, this.colorList[this.colorIndex]);
						}
						
						if (this.light && this.light.current_value !== undefined) {
							await mqttApi.setLightBrightness(this.deviceSn, this.light.current_value);
						}
						
						if (this.speed && this.speed.current_value !== undefined) {
							await mqttApi.setLightSpeed(this.deviceSn, this.speed.current_value);
						}
						
						uni.showToast({
							title: '灯光已开启',
							icon: 'success'
						});
					} else {
						// 关闭LED（只需要一个指令）
						await mqttApi.turnOffLight(this.deviceSn);
						
						uni.showToast({
							title: '灯光已关闭',
							icon: 'success'
						});
					}
					
					// 更新本地状态到deviceStore
					const currentStatus = deviceStore.getDeviceStatus(this.deviceSn) || {};
					deviceStore.updateDeviceStatus(this.deviceSn, {
						...currentStatus,
						lightSettings: {
							enabled: value,
							mode: this.lightType,
							color: this.colorIndex >= 0 ? this.colorList[this.colorIndex] : null,
							brightness: this.light.current_value,
							speed: this.speed.current_value
						}
					});
					
				} catch (error) {
					console.error('[LightControl] 灯光控制失败:', error);
					// 恢复开关状态
					this.checkedLight = !value;
					uni.showToast({
						title: '设置失败，请重试',
						icon: 'error'
					});
				}
			},
			
			// 独立的颜色变更处理
			async onColorChange(e) {
				console.log('[LightControl] 颜色变更:', e);
				if (!this.checkedLight) {
					// 灯光关闭时不处理颜色变更
					return;
				}
				
				try {
					const colorValue = this.colorList[this.colorIndex];
					await mqttApi.setLightColor(this.deviceSn, colorValue);
					
					// 更新本地状态
					this.updateLocalLightSettings({ color: colorValue });
				} catch (error) {
					console.error('[LightControl] 颜色设置失败:', error);
					uni.showToast({
						title: '颜色设置失败',
						icon: 'error'
					});
				}
			},
			
			// 独立的亮度变更处理
			async onBrightnessChange() {
				console.log('[LightControl] 亮度变更:', this.light.current_value);
				if (!this.checkedLight) {
					return;
				}
				
				try {
					await mqttApi.setLightBrightness(this.deviceSn, this.light.current_value);
					
					// 更新本地状态
					this.updateLocalLightSettings({ brightness: this.light.current_value });
				} catch (error) {
					console.error('[LightControl] 亮度设置失败:', error);
					uni.showToast({
						title: '亮度设置失败',
						icon: 'error'
					});
				}
			},
			
			// 独立的速度变更处理
			async onSpeedChange() {
				console.log('[LightControl] 速度变更:', this.speed.current_value);
				if (!this.checkedLight) {
					return;
				}
				
				try {
					await mqttApi.setLightSpeed(this.deviceSn, this.speed.current_value);
					
					// 更新本地状态
					this.updateLocalLightSettings({ speed: this.speed.current_value });
				} catch (error) {
					console.error('[LightControl] 速度设置失败:', error);
					uni.showToast({
						title: '速度设置失败',
						icon: 'error'
					});
				}
			},
			
			// 独立的模式变更处理
			async onModeChange(newMode) {
				console.log('[LightControl] 模式变更:', newMode);
				if (!this.checkedLight) {
					return;
				}
				
				this.lightType = newMode;
				
				try {
					await mqttApi.setLightEffect(this.deviceSn, newMode);
					
					// 更新本地状态
					this.updateLocalLightSettings({ mode: newMode });
				} catch (error) {
					console.error('[LightControl] 模式设置失败:', error);
					uni.showToast({
						title: '模式设置失败',
						icon: 'error'
					});
				}
			},
			
			// 更新本地状态的辅助方法
			updateLocalLightSettings(changes) {
				const currentStatus = deviceStore.getDeviceStatus(this.deviceSn) || {};
				const currentLightSettings = currentStatus.lightSettings || {};
				
				deviceStore.updateDeviceStatus(this.deviceSn, {
					...currentStatus,
					lightSettings: {
						...currentLightSettings,
						...changes
					}
				});
			},
			
			onPickColor(e) {
				console.log(e)
			},
			
			// 保留原有的综合方法，用于向后兼容
			onColorChange_legacy(e) {    
				console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.color-box {
		width: 100%;
		margin-top: 40rpx;
		
		&.disabled {
			opacity: 0.5;
			pointer-events: none;
		}
		
		// 渐变色选择器
		.gradient-picker {
			width: 100%;
			height: 400rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			
			.gradient-background {
				width: 100%;
				height: 100%;
				position: relative;
				background: linear-gradient(to right, 
					#FF0000 0%, 
					#FF7F00 14.28%, 
					#FFFF00 28.56%, 
					#00FF00 42.84%, 
					#00FFFF 57.12%, 
					#0000FF 71.4%, 
					#8B00FF 85.68%, 
					#FF00FF 100%
				);
				
				// 黑色渐变遮罩（从上到下：透明 -> 半透明黑色）
				.gradient-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(to bottom, 
						rgba(255, 255, 255, 0) 0%, 
						rgba(0, 0, 0, 0.5) 100%
					);
				}
			}
			
			// 颜色指示器
			.color-indicator {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				margin-left: -20rpx;
				margin-top: -20rpx;
				pointer-events: none;
				z-index: 10;
				
				.indicator-circle {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 4rpx solid #FFFFFF;
					box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.3);
					background: transparent;
				}
			}
		}
		
		.color-list {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				
				.ico {
					display: none;
					color: #FFFFFF;
				}
				
				&.on {
					.ico {
						display: block;
					}
					
					// 添加外圈白色边框
					&::after {
						content: '';
						position: absolute;
						top: -4rpx;
						left: -4rpx;
						right: -4rpx;
						bottom: -4rpx;
						border-radius: 100%;
						border: 2rpx solid rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}

	.disabled-text {
		opacity: 0.5 !important;
	}

	.light-change {
		&.disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}

	.form-box {
		width: 100%;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.light-type {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			
			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}

			.type {
				width: 316rpx;
				height: 144rpx;
				min-width: 316rpx;
				border-radius: 16rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.08);
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 32rpx;
				margin-bottom: 40rpx;

				.ico {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				&.on {
					background: rgba(0, 0, 0, 0.08);
					border: 1px solid rgba(0, 0, 0, 0.8);
				}
			}
		}
	}

	.pop-box {
		width: 100%;
		max-height: 80vh;
		background-color: #F3F3F3;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		display: flex;
		flex-direction: column;
		
		.pop-header {
			flex-shrink: 0;
		}
		
		.pop-content {
			flex: 1;
			overflow-y: auto;
			max-height: calc(80vh - 120rpx);
		}
	}

	.top-status {
		.dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 100%;
			margin-right: 8rpx;
			display: inline-block;
			background-color: #22C55D;

			&.no {
				background-color: rgba(0, 0, 0, 0.4);
			}
		}
	}
</style>